<script lang="ts" setup>

const porps = defineProps({
  sort: {
    type: Object,
    required: true,
  },
});

</script>
<template>
  <div class="sort_item">
    <img class="_img" :src="sort.img" />
    <div class="name">{{ sort.name }}</div>
    <div class="en_name">{{ sort.enName }}</div>
  </div>
</template>
<style>
.sort_item {
  position: relative;
  padding: 18px 15px;
  background-color: #f6f6f6;
  border-radius: 12px;
  border: 1px solid #f6f6f6;
  /* box-shadow: 0 2px 4px #0000000a; */
}
.name {
  font-weight: bolder;
  font-size: 20px;
  color: #333;
}
.en_name {
  margin-top: 2px;
  font-weight: bolder;
  color: #afafaf;
  font-size: 12px;
}
._img {
  position: absolute;
  width: 40px;
  right: 20px;
  top: 15px;
}
</style>
